<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body {
            height:100%;
            overflow: hidden;
        }
        .container {
            display: flex;
            justify-content: space-between;
            height:100%;
        }
        #userlist li span{
            display: block;
        }
        .left{
            width:300px;
            height:100%;
            border-right:1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <span>v1:</span>
            <input type="text" id="input"/>
            <button type="button" onclick="send()">发送</button>
            <div id="chatbox">
            </div>
            <div class="online-list">
                <h3>当前在线人数：<span class="userCounts"></span></h3>

                <ul id="userlist"></ul>
            </div>
        </div>
        <div class="right">
        </div>
    </div>
    
    <script>
        var ws = new WebSocket("ws://127.0.0.1:3001");
        ws.onopen = () => {
            console.log('连接成功');
        }
        function send() {
            let input = document.getElementById("input");
            let str = 'v1_'+input.value;
            ws.send(str);
        }
        function renderChat(data){
            let chatbox = document.getElementById("chatbox");
            
            console.log(data,'data')
            let p = document.createElement("p");
            let span = document.createElement("span");
            span.className  = "time";
            let span2 = document.querySelector(".userCounts");
            p.innerHTML = data.user+'说：'+data.message.toString('urf8');
            span.innerHTML = data.time;
            span.style.fontSize = "10px";
            span.style.color = "#999";
            span.style.margin = "0 5px"
            p.appendChild(span);
            span2.innerHTML = data.userList.users.length;
            chatbox.appendChild(p);
        }
        function renderUsers(users) {
            let userDom = document.getElementById("userlist");
            users.map(item=>{
                let li = document.createElement("li");
                let span_name = document.createElement("span");
                let span_level = document.createElement("span");
                let span_coin = document.createElement("span");
                let span_exp = document.createElement("span");
                let span_max_hp = document.createElement("span");
                let span_current_hp = document.createElement("span");
                let span_max_mp = document.createElement("span");
                let span_current_mp = document.createElement("span");
                let span_attack = document.createElement("span");
                let span_defense = document.createElement("span");
                let span_speed = document.createElement("span");
                let span_race = document.createElement("span");
                let span_exp_to_level = document.createElement("span");
                let span_max_exp = document.createElement("span");
                let span_attack_type = document.createElement("span");
                let span_magic_attack = document.createElement("span");
                let span_magic_esistance = document.createElement("span");
                let span_status = document.createElement("span");
                span_name.innerHTML = `玩家：${item.name}`;
                span_level.innerHTML = `等级：${item.level}`;
                span_coin.innerHTML = `金币：${item.coin}`;
                span_exp.innerHTML = `经验值：${item.exp}`;
                span_max_hp.innerHTML = `最大血量：${item.max_hp}`;
                span_current_hp.innerHTML = `当前血量：${item.current_hp}`;
                span_max_mp.innerHTML = `最大法术值：${item.max_mp}`;
                span_current_mp.innerHTML = `当前法术值：${item.current_mp}`;
                span_attack.innerHTML = `攻击力：${item.attack}`;
                span_defense.innerHTML = `防御力：${item.defense}`;
                span_speed.innerHTML = `速度：${item.speed}`;
                span_race.innerHTML = `种族：${item.race}`;
                span_exp_to_level.innerHTML = `升级所需经验值：${item.exp_to_level}`;
                span_max_exp.innerHTML = `最大经验值：${item.max_exp}`;
                span_attack_type.innerHTML = `攻击类型：${item.attack_type}`;
                span_magic_attack.innerHTML = `法术攻击力：${item.magic_attack}`;
                span_magic_esistance.innerHTML = `法术抗性：${item.magic_esistance}`;
                span_status.innerHTML = `状态：${item.status}`;
                li.appendChild(span_name);
                li.appendChild(span_level);
                li.appendChild(span_coin);
                li.appendChild(span_exp);
                li.appendChild(span_max_hp);
                li.appendChild(span_current_hp);
                li.appendChild(span_max_mp);
                li.appendChild(span_current_mp);
                li.appendChild(span_attack);
                li.appendChild(span_defense);
                li.appendChild(span_speed);
                li.appendChild(span_race);
                li.appendChild(span_exp_to_level);
                li.appendChild(span_max_exp);
                li.appendChild(span_attack_type);
                li.appendChild(span_magic_attack);
                li.appendChild(span_magic_esistance);
                li.appendChild(span_status);
                userDom.appendChild(li);
                // name: null,//名字
                // level:0,//等级
                // coin:0,//金币
                // exp:0,//经验值
                // max_hp:100,//最大血量
                // current_hp:100,//当前血量
                // max_mp:100,//最大法术值
                // current_mp:100,//当前法术值
                // attack: 5,//攻击力
                // defense: 3,//防御力
                // speed: 4,//速度
                // race: '1',//1-人 2-妖 3-魔 4-神
                // exp_to_level: 10,//升级所需经验值
                // max_exp: 25,//最大经验值
                // attack_type: '1',//攻击类型 1-物理 2-法术
                // magic_attack: 5,//法术攻击力
                // magic_esistance:3,//法术抗性
                // status: 'alive'//
            })
        }
        ws.onmessage = function (evt) {
            let data = JSON.parse(evt.data);
            let users = data.userList.users;
            renderChat(data);
            renderUsers(users);
        }
        
    </script>
</body>
</html>